<template>
	<div class="agreement display-center">
		<van-checkbox class="agreement-checkbox" v-model="checked" icon-size=".289855rem" checked-color="black" @change="$emit('checked')">
			<span style="color: #999999">勾选代表已同意</span>
			<span style="color: #6899f4" @click="goAgreementDetails">《用户协议》</span>
		</van-checkbox>
	</div>
</template>

<script>
export default {
	name: 'index',
	data() {
		return {
			checked: false, //协议选中标识
		};
	},
	components: {},
	computed: {},
	mounted() {},
	methods: {
		goAgreementDetails() { //查看用户协议
			event.stopPropagation();
			this.$toast('查看用户协议');
		},
	},
};
</script>
<style lang='scss' scoped>
.agreement {
	.agreement-checkbox {
		span {
			font-size: 0.289855rem;
		}
		::v-deep .van-checkbox__icon {
			.van-icon {
				display: flex;
				align-items: center;
				justify-content: center;

				&::before {
					width: 0.289855rem;
					height: 0.289855rem;
				}
			}
		}
		::v-deep .van-checkbox__label {
			display: flex;
			margin-left: 0;
		}
	}
}
</style>